<template>
  <div class="default-main ba-table-box">
      <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

      <!-- 表格顶部菜单 -->
      <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
          quick-search-placeholder="根据分类名称模糊查询" />
      <!-- 表格 -->
      <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
      <Table />

      <PopupForm ref="formRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import PopupForm from './popupForm.vue'
import { useI18n } from 'vue-i18n'
import { baTableApi } from '/@/api/common'
import baTableClass from '/@/utils/baTable'


defineOptions({
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'device/index',
})

const { t } = useI18n()
const tableRef = ref()
const baTable = new baTableClass(
  new baTableApi('/admin/v1/device/'),
  {
      column: [
          { type: 'selection', align: 'center', operator: false },
          { label: 'ID', prop: 'id', align: 'center', operator: false, },
          { label: '名称', prop: 'title', align: 'center', operator: 'LIKE', operatorPlaceholder: '请输入名称' },
          { label: '封面图', prop: 'url', align: 'center', render: 'image', operator: false },
       
          {
              label:'创建时间',
              prop: 'create_time',
              align: 'center',
              render: 'datetime',
              sortable: 'custom',
              operator: false,
          },
          {
              label: t('State'),
              prop: 'status',
              align: 'center',
              render: 'tag',
              custom: { '0': 'danger', '1': 'success' },
              replaceValue: { '0': t('Disable'), '1': t('Enable') },
          },
          { label: t('Operate'), align: 'center', width: '130', render: 'buttons', operator: false, buttons: defaultOptButtons(['edit', 'delete']) }
      ],
  },
  {
      defaultItems: {
          status:1,
          weigh: 0,
          is_tj:0,
          is_right:0,
          is_home:0
      },
  }
)

provide('baTable', baTable)

onMounted(() => {
  baTable.table.ref = tableRef.value
  baTable.mount()
  baTable.getIndex()?.then(() => {
      baTable.dragSort()
  })
})
</script>

<style scoped lang="scss"></style>
